import { Modal, Form, Row, Col, message } from 'antd';
import ProForm, { ProFormRadio, ProFormText, ProFormTextArea, ProFormDatePicker } from '@ant-design/pro-form';
import styles from '../../index.less';
import {SystemDeptTreeSelect} from '@/components/system/dept';
import {SystemRoleSelect} from '@/components/system/role';
import {SystemDutyTreeSelect} from '@/components/system/duty';
import {SystemJobSelect} from '@/components/system/job';
import { checkUsername, save, update } from '@/services/system/user';
import moment from 'moment';

const SystemUserForm = (props) => {
  const [form] = Form.useForm();
  const { formVisible, onSubmit, onCancel, values } = props;

  const saveHandle = async (formValue) => {
    const data = await save(formValue);

    if (data.success) message.success('新建用户成功!');
    else message.error('新建用户失败!');
  };

  const updateHandle = async (formValue) => {
    const data = await update(formValue);

    if (data.success) message.success('修改用户成功!');
    else message.error('修改用户失败!');
  };

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    const formValue = { ...values, ...fieldsValue };

    formValue.birthday = moment(formValue.birthday).format('YYYYMMDD');
    formValue.roleIdList = [formValue.roleId];
    formValue.deptIdList = [formValue.deptId];
    formValue.dutyIdList = [formValue.dutyId];
    formValue.jobIdList = [formValue.jobId];

    if (formValue.id) await updateHandle(formValue);
    else await saveHandle(formValue);

    onSubmit();
  }

  const validatorUsername = (rule, value, callback) => {
    if (value) {
      checkUsername({ id: values.id, username: value}).then((result) => {
        if (result.success) {
          callback("用户登陆名称已被使用");
        } else {
          callback();
        }
      });
    } else {
      callback();
    }
  }

  const selectDept = (e) => {
    form.setFieldsValue({jobId: null});
  }

  return (
    <Modal
      className={styles.userFormModal}
      destroyOnClose
      title={values.id ? '修改用户信息' : '新增用户信息'}
      visible={formVisible}
      onOk={okHandle}
      onCancel={onCancel}
      width={900}
    >
      <ProForm 
        initialValues={values} 
        form={form} submitter={false}
        layout={'horizontal'} 
        labelCol= { {span: 5} } wrapperCol= { {span: 19} }
      >
        <Row gutter={32}>
          <Col span={12}>
            <ProFormText 
              name="username" label="登陆名称" 
              rules={[{required: true, message: '请输入登陆名称!'}, {max: 20, message: '登陆名称过长!'}, {validator: validatorUsername}]}
            />
          </Col>
          <Col span={12}>
            {
              values.id ? (
                <ProFormText.Password name="password" label="登陆密码" disabled={true} rules={[{ required: true, message: '请输入登陆密码!' }]} />
              ) : (
                <ProFormText.Password name="password" label="登陆密码"
                  rules={[{ required: true, message: '请输入登陆密码!' }, {max: 20, message: '登陆密码最长20位!'}, {min: 6, message: '登陆密码最短6位!'}]}
                />
              )
            }
          </Col>
        </Row>

        <Row gutter={32}>
          <Col span={12}>
            <ProFormText name="name" label="真实姓名" rules={[{ required: true, message: '请输入真实姓名!' }, {max: 20, message: '真实姓名过长!'}]}/>
          </Col>
          <Col span={12}>
            <ProFormText name="mobile" label="手机号码" 
              rules={[{ required: true, message: '请输入手机号码!' }, {pattern: /^1\d{10}$/, message: '手机号码格式不正确!'}]}
            />
          </Col>
        </Row>

        <Row gutter={32}>
          <Col span={12}>
            <ProFormText name="idCard" label="身份证号" rules={[{ required: true, message: '请输入身份证号!' }]}/>
          </Col>
          <Col span={12}>
            <ProFormDatePicker name="birthday" label="出生日期" rules={[{ required: true, message: '请输入出生日期!' }]}/>
          </Col>
        </Row>

        <Row gutter={32}>
          <Col span={12}>
            <ProFormRadio.Group 
              name="gender" label="用户性别" initialValue="MAN" 
              options={[ { label: '男', value: 'MAN', },  { label: '女', value: 'WOMAN', } ]}
              rules={[{ required: true, message: '请选择用户性别!' }]}
            />
          </Col>
          <Col span={12}>
            <ProFormRadio.Group 
              name="isLock" label="是否锁定" initialValue="NO" 
              options={[ { label: '否', value: 'NO', },  { label: '是', value: 'YES', } ]}
              rules={[{ required: true, message: '请选择锁定状态!' }]}
            />
          </Col>
        </Row>

        <Row gutter={32}>
          <Col span={12}>
            <Form.Item label="归属部门" name="deptId" rules={[{ required: true, message: '请选择归属部门!' }]}>
              <SystemDeptTreeSelect onChange={selectDept}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item noStyle shouldUpdate>
              {(form) => {
                return (
                  <Form.Item label="所属岗位" name="jobId" rules={[{ required: true, message: '请选择所属岗位!' }]}>
                    <SystemJobSelect deptId={form.getFieldValue('deptId')}/>
                  </Form.Item>
                )
              }}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={32}>
          <Col span={12}>
            <Form.Item label="职务信息" name="dutyId" rules={[{ required: true, message: '请选择职务信息!' }]}>
              <SystemDutyTreeSelect/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="用户角色" name="roleId" rules={[{ required: true, message: '请选择用户角色!' }]}>
              <SystemRoleSelect/>
            </Form.Item>
          </Col>
        </Row>
        
        <Row gutter={32}>
          <Col span={12}>
            <ProFormTextArea label="备注说明" name="remark" rules={[ {max: 100, message: '备注过长!'}]}/>
          </Col> 
        </Row>
        
      </ProForm>
    </Modal>
  );
}

export default SystemUserForm;